<template>
  <div class="pay-details">
    <!-- 饮食介绍 -->
    <img class="info-img" v-if="details.img && details.img.length>8" :src="details.img">
    <div class="info-p">
      <p class="title">{{details.title}}</p>
      <div class="audio">
        <aplayer 
          @click.native = "play"
          v-if='isShow'
          :music="musics"
          mode = "sigle"
        />
      </div>
      <div class="share"  @click="buy_audios">
        <span @click="mask_show = !mask_show, code = false, fenxiang = true">
          <img src="@/assets/kechenxiangqing2.png"> 分享给朋友
        </span>
        <span @click="share_qrcode">
          <img src="@/assets/kechenxiangqing3.png"> 我的二维码
        </span>
      </div>
    </div>
    <div class="wx-number">
      <p class="info">{{info}} <br> <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg2MDAxODU1Ng==&scene=124#wechat_redirect">点击可关注嚇拉公众号哦~</a></p>
      <div class="img">
        <img src="@/assets/kechenxlangqin1.png">
        <p>长按识别二维码</p>
      </div>
    </div>
    <img @click="router({path: 'goodsDetails', query:{goodsId: 1}})" class="xinzeng-img" src="@/assets/xinzeng.png" alt="">
    <div class="course-info">
      <p class="title">课程介绍</p>
      <p class="con" v-html="details.content"></p>
    </div>
    <div class="reward">
      <p class="tip">感谢您的支持，我们会继续努力的！ </p>
      <span class="reward-btn" @click="reward.reward_show = true">打赏</span>
    </div>
    <div class="mask" :class="(mask_show) ? 'active' : ''" @click="mask_show = !mask_show, fenxiang = !fenxiang">
      <img v-if="fenxiang" class="fenxiang-img" src="@/assets/fenxiang.png">
      <div v-if="code" class="code">
        <p class="title">长按图片分享给好友，好友可通过二维码加入我们</p>
        <div v-if="loading" class="loading">
          <img src="@/assets/jika10.png" alt="">
          <p>加载中...</p>
        </div>
        <div class="share-img" v-else>
          <img :src="shareUrl">
        </div>
      </div>
    </div>
    <reward-card :reward = "reward"></reward-card>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
import { AlertModule } from 'vux'
import axios from 'axios'
import { getThreeShow, get_pay_about, get_user_info, getFreeAudioShow1, add_play } from '@/api/api'
import rewardCard from '@/components/reward'

export default {
  components: {
    Aplayer,
    rewardCard
  },
  data () {
    return {
      mask_show: false,
      fenxiang: true,
      code: true,
      details: {},
      info: '',
      phone: '',
      shareUrl: '',
      loading: true,
      musics: null,
      isShow: false,
      reward: {},
    }
  },
  created () {
    this.id = this.$route.query.id
    this.is_three = this.$route.query.is_three+''
    if(this.is_three == 'true'){
      this.get_free_audio_show1()
    }else{
      this.get_three_show()
    }
    this.get_pay_abouts()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    share () {
      if(sessionStorage.uid && !sessionStorage.shareUrl){
        axios.post('http://m.aihera.cn/index.php/home/poster/create_poster/uid/'+sessionStorage.uid).then((res) => {
          if(res.data.status == 1){            
            sessionStorage.setItem('shareUrl', res.data.info)
            this.shareUrl = sessionStorage.shareUrl
            if(sessionStorage.shareUrl){
              this.loading = false
              this.shareUrl = sessionStorage.shareUrl
            }else{
              this.loading = true
            }
          }
        }).catch((response) => {
          sessionStorage.removeItem('shareUrl')
          AlertModule.show({
            title: '系统提示',
            content: err.response.data.message
          })
        })
      }else{
        this.loading = false
        this.shareUrl = sessionStorage.shareUrl
      }  
    },  
    get_three_show () {
      getThreeShow(this.id).then((res) => {
        this.get_aduio(res)
      }).catch((err) => {
        console.log(err)
      })
    },
    get_free_audio_show1() {
      getFreeAudioShow1(this.id).then((res) => {
        this.get_aduio(res)
      }).catch((err) => {
        console.dir(err)
      })
    },
    get_aduio(res) {
      this.free_id = res.data.info.id;
      this.checkIsThree = (res.data.info.checkIsThree == 1) ? 1 : 0;
      this.details = res.data.info
      this.musics = {
        title: this.details.title,
        artist: ' ',
        src: this.details.url
      }
      this.reward = {
        reward_show: false,
        title: this.details.title
      }
      this.isShow=true
    },
    get_pay_abouts () {
      get_pay_about().then((res) => {
        this.info = res.data.info
      }).catch((err) => {
        console.log(err)
      })
    },
    share_qrcode () {
      this.share()
      this.mask_show = !this.mask_show
      this.code = true
      this.fenxiang = false
    },
    buy_audios () {
      get_user_info().then((res) => {
        this.phone = res.data.info.username
        if(!this.phone){
          this.$router.push({path: './bindPhone', query:{routers: 'audioDetails?id='+this.audio_id}})
          return          
        }
      }).catch((err) => {
        console.dir(err)
      })
    },
    play() {      
      if(!sessionStorage.phone){
        this.$router.push({path: './bindPhone'})
        return
      }
      add_play(this.free_id, this.checkIsThree).then((res) => {
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .pay-details
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .info-p
      background-color #fff
      padding 1.5rem
      margin-bottom 1rem    
      .title
        line-height 2.4rem
        font-size 1.7rem
        color #333
        font-weight bold
        text-overflow ellipsis
        white-space nowrap
        overflow hidden
      .price
        color #FF659B
        font-weight bold
        font-size 1.7rem
        margin-top 1.5rem     
      .audio
        padding 2rem 0
        background-color #fff
        border-bottom 1px solid #e5e5e5
      .share
        display flex
        padding-top 2rem
        span
          flex 1
          display block
          font-size 1.3rem
          color #333
          img
            width 2.4rem
            display inline-block
            vertical-align middle
            position relative
            top -.2rem
            margin-right 1rem
    .wx-number
      padding 3rem 1.5rem
      background-color #fff
      display flex
      .info
        font-size 1.3rem
        line-height 2.4rem
        color #666
        width 22.5rem
        margin-right 2.5rem
        a
          color #2f86d3
          font-size 1.2rem
          position relative
          top 1rem
      .img
        width 9rem
        height 9rem
        text-align center
        color #999
        font-size 1.1rem
        img         
          border: 1px solid #e5e5e5
          padding .1rem
        p
          margin-top .5rem
    .xinzeng-img
      padding 2rem 1.5rem
      padding-top 0
      box-sizing border-box
      margin-bottom 1rem
      background-color #fff
    .course-info
      padding 3rem 0
      background-color #fff
      .con
        font-size 1.3rem
        color #666
        line-height 2.4rem
        padding 1.5rem
        padding-bottom 0
      .title
        font-size 1.6rem
        color #333
        height 1.5rem
        line-height 1.5rem
        padding-left 1.5rem
        position relative
        font-weight 500
        &::after
          content ''
          position absolute
          width .2rem
          height 100%
          background-color #FF659B
          left 0px
          top .1rem
    .mask.active
      display block
    .mask
      position fixed
      top 0
      left 0
      width 100%
      background-color rgba(0,0,0,.6)
      height 100vh
      overflow hidden
      display none
      img.fenxiang-img
        width 73%
        float right
        margin-top 1rem
        margin-right 1.8rem
      p.title
        text-align center
        line-height 4rem
        color #fff
        font-size 1.3rem
      .loading
        img
          width 6rem
          margin-left -3rem
          left 50%
          position relative
          top 16rem
          animation foguangMove 1s infinite linear
        p
          color #fff
          font-size 1.8rem
          top 18rem
          position relative
          text-align center
      .share-img
        margin 0 1.5rem
        background-color #fff
        position relative
        .er-code
          position absolute
          right 1.5rem
          background-color #fff
          padding .5rem
          width 7.4rem
          height 7.4rem
          border-radius .4rem
          bottom 7rem
        .person
          display flex
          padding 2rem 1.5rem
          img
            max-width 7rem
            max-height 7rem
            margin-right 1.5rem
          .con
            position relative
            h3
              font-size 1.7rem
              color #FF659B
              line-height 1.6rem
            p
              font-size 1.2rem
              color #333
              width 15rem
              position absolute
              bottom .5rem
    .reward
      margin-top 1rem
      background-color #fff
      text-align center
      padding-top 2.5rem
      padding-bottom 4rem
      .tip
        color #666
        font-size 1.2rem
        margin-bottom 1.5rem
      .reward-btn
        border 1px solid #ff659b
        height 2.5rem
        line-height 2.5rem
        text-align center
        width 8rem
        border-radius 100px
        color #ff659b
        font-size 1.2rem
        display inline-block
</style>